<template>
  <svg xmlns="http://www.w3.org/2000/svg" 
    :width="_width" 
    :height="_height"
    :spin="spin"
    :rtl="rtl"
    viewBox="0 0 1024 1024"
    preserveAspectRatio="xMidYMid meet"
    fill=""
    role="presentation"
    ref="host"
  >
    <g><path d="M881.102 519.644a6.329 6.329 0 0 0-6.329 6.294v14.222a340.444 340.444 0 0 1-340.089 340.053h-14.222a340.444 340.444 0 0 1-340.195-339.769v-14.222A340.444 340.444 0 0 1 520.356 186.17h9.422l-61.05 60.907a6.329 6.329 0 0 0 0 8.924 6.293 6.293 0 0 0 8.925 0l72-71.964a6.364 6.364 0 0 0 0-8.96l-72-71.965a6.258 6.258 0 0 0-8.924 0 6.329 6.329 0 0 0 0 8.925l61.049 61.19h-9.565a353.102 353.102 0 0 0-352.71 352.712v14.222a353.102 353.102 0 0 0 352.71 352.711h14.223a353.102 353.102 0 0 0 352.71-352.711v-14.222a6.293 6.293 0 0 0-6.044-6.294z"/><path d="M558.72 301.547a7.36 7.36 0 0 0-1.564-.534 4.729 4.729 0 0 0-.996 0H394.062a45.44 45.44 0 0 0-46.009 44.587v368.498a45.44 45.44 0 0 0 46.01 44.693h302.221a45.404 45.404 0 0 0 46.01-44.693v-232.96a7.467 7.467 0 0 0 0-1.28 5.404 5.404 0 0 0-.57-1.494 1.458 1.458 0 0 0 0-.32 6.329 6.329 0 0 0-.995-1.35l-180.373-174.01a7.111 7.111 0 0 0-1.245-.888zM696.284 745.99H394.062a32.782 32.782 0 0 1-33.386-32V345.6a32.818 32.818 0 0 1 33.386-32h155.591v167.609a6.329 6.329 0 0 0 6.33 6.329H729.67v226.63a32.747 32.747 0 0 1-33.387 31.965zM562.311 474.702V321.813l158.08 152.89z"/></g>
  </svg>
</template>

<script lang="ts">
import { Vue, prop } from 'vue-class-component';

class Props {
    width = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    height = prop<number | string>({
      type: [Number, String],
      required: false
    })
    
    stroke = prop<string>({
      type: String,
      required: false
    })
    
    fill = prop<string>({
      type: String,
      required: false
    })
    
    color = prop<string>({
      type: String,
      required: false
    })
    
    spin = prop<boolean>({
      type: Boolean,
      required: false
    })
    
    rtl = prop<boolean>({
      type: Boolean,
      required: false
    })
    

  // optional prop with default
  size = prop<number | string>({ default: '1em' })
}

export default class IconIcon_06_01 extends Vue.with(Props) {
    get _fill(): string | undefined {
        return this.fill || this.color
    }
    get _stroke(): string | undefined {
        return this.stroke || this.color
    }
    get _width(): string | number {
      return this.width || this.size
    }
    get _height(): string | number {
      return this.height || this.size
    }
  mounted():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
    updated():void {
        if (!this._fill) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-fill]').forEach(item => {
            item.setAttribute('fill', item.getAttribute('data-follow-fill') || '')
            })
        }
        if (!this._stroke) {
            (this.$refs.host as HTMLElement)?.querySelectorAll('[data-follow-stroke]').forEach(item => {
            item.setAttribute('stroke', item.getAttribute('data-follow-stroke') || '')
            })
        }
    }
}
</script>

<style scoped>
svg[spin="true"] {animation: iconpark-spin 1s infinite linear;}
svg[spin="true"][rtl="true"] {animation: iconpark-spin-rtl 1s infinite linear;}
svg[rtl="true"] {
  transform: scaleX(-1);
}
@keyframes iconpark-spin {
  0% { -webkit-transform: rotate(0); transform: rotate(0);} 100% {-webkit-transform: rotate(360deg); transform: rotate(360deg);}
}
@keyframes iconpark-spin-rtl {
  0% {-webkit-transform: scaleX(-1) rotate(0); transform: scaleX(-1) rotate(0);} 100% {-webkit-transform: scaleX(-1) rotate(360deg); transform: scaleX(-1) rotate(360deg);}
}
</style>
